<template>
  <div>
    <h2>房型显示列表</h2>
    <input type="text" placeholder="房型名称" v-model="page.name" />
    <input type="radio" value="1" name="state" v-model="page.state" />启用
    <input type="radio" value="2" name="state" v-model="page.state" />停用
    <input type="button" value="查询" @click="chax" />
    <input type="button" value="重置" @click="cz" />
    <table class="table">
      <thead>
        <tr>
          <td>编号</td>
          <td>房型名称</td>
          <td>门市销售价格</td>
          <td>房间数</td>
          <td>状态</td>
          <td>房间号</td>
          <td>编辑</td>
          <td>逻辑删除</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="e in data">
          <td>{{ e.id }}</td>
          <td>{{ e.houseName }}</td>
          <td>{{ e.price }}</td>
          <td>{{ e.sum }}</td>
          <td>{{ e.state == 1 ? "启用" : "禁用" }}</td>
          <td>{{ e.houseinfoid }}</td>
          <td><input type="button" value="修改" @click="update(e.id)" /></td>
          <td>
            <input type="button" value="逻辑删除" @click="loudeletes(e.id)" />
          </td>
        </tr>
      </tbody>
    </table>
    一共{{ pageinfo.listcount }}页,当前第{{ page.pageIndex }}页,一共{{
      pageinfo.count
    }}条,每页显示{{ page.pageSize }}条
    <input type="button" value="首页" @click="getpage(1)" />
    <input type="button" value="下一页" @click="getpage(2)" />
    <input
      v-for="i in pageinfo.listcount"
      type="button"
      :value="i"
      @click="dianji(i)"
    />
    <input type="button" value="上一页" @click="getpage(3)" />
    <input type="button" value="尾页" @click="getpage(5)" />
    <input type="number" v-model="page.pageIndex" /><input
      type="button"
      value="跳转"
      @click="shuru"
    />

    <select v-model="page.pageSize" @click="yrl">
      <option value="3">3</option>
      <option value="5">5</option>
      <option value="8">8</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";

onMounted(() => {
  show();
});

const router = useRouter();

//跳转编辑页
const update = (val: any) => {
  router.push({ path: "/up", query: { id: val } });
};

const selete = ref(false);
const selet = ref([]);
//逻辑删除
const loudeletes = (val: any) => {
  if (!confirm("确认删除吗")) {
    return;
  }
  axios
    .delete("https://localhost:7035/api/House/Delete", {
      params: { idstring: val },
    })
    .then((res) => {
      if (res.data > 0) {
        alert("逻辑删除成功");
        res.data.isDelete == false;
        show();
      } else {
        alert("逻辑删除失败");
      }
    });
};

//分页点击跳转
const dianji = (val: any) => {
  page.value.pageIndex = val;
  show();
};
//输入跳转页
const shuru = () => {
  show();
};
//页容量
const yrl = () => {
  show();
};
//分页
const getpage = (val: any) => {
  if (val == 1) {
    if ((page.value.pageIndex = 1)) {
      page.value.pageIndex = 1;
      show();
    }
  }
  if (val == 2) {
    if (page.value.pageIndex < pageinfo.value.listcount) {
      page.value.pageIndex += 1;
      show();
    }
  }
  if (val == 3) {
    if (page.value.pageIndex > 1) {
      page.value.pageIndex -= 1;
      show();
    }
  }
  if (val == 5) {
    page.value.pageIndex == pageinfo.value.listcount;
    show();
  }
};

//查询
const chax = () => {
  show();
};
//重置
const cz = () => {
  (page.value.name = ""), (page.value.state = 0);
};

const data = ref([
  {
    id: 0,
    houseName: "",
    price: "",
    sum: "",
    state: 0,
    houseinfoid: "",
    isDelete: true,
  },
]);

const page = ref({
  pageIndex: 1,
  pageSize: 3,
  name: "",
  state: 0,
});

const pageinfo = ref({
  count: 0,
  listcount: 0,
});

const show = () => {
  axios
    .get("https://localhost:7035/api/House/ShowHouse", { params: page.value })
    .then((res) => {
      data.value = res.data.listcount;

      pageinfo.value.count = res.data.count;

      pageinfo.value.listcount = Math.ceil(
        pageinfo.value.count / page.value.pageSize
      );
    });
};
</script>

<style scoped></style>
